<template>
	<view class="ordercopy_page">
		<view class="topbar" :style="{'height':topHeight+'px'}"></view>
		<view class="page_title">
			<u-icon class="back_icon" name="arrow-left" size="24" color="#FFFFFF" @click="back()"></u-icon>
			<view>订单管理</view>
			<u-icon class="search_icon" name="search" size="30" color="#FFFFFF"></u-icon>
		</view>
		<u-tabs :list="tab_list" lineColor="#00CC7B" :current="index1" :activeStyle="{color:'#00CC7B'}" @click="click"></u-tabs>
		<block v-if="order_list.length>0">
			<view class="item" v-for="(item,index) in order_list" :key="index" @click="toDetail(item.id)">
				<view class="text">{{item.state_text}}</view>
				<view class="item_tips">{{item.order_type==1?'一口价':item.order_type==2?'报价':item.order_type==3?'悬赏':'房屋装饰'}}</view>
				<view class="content">
					<image :src="item.category.image"></image>
					<view class="right">
						<view class="goods_name">
							<view>{{item.category_name}}</view>
							<view>x{{item.number}}</view>
						</view>
						<view class="tips">{{item.serve_type==1?'安装':'维修'}}</view>
						<view class="tips">{{item.fittings_status==1?'未到货':'已到货'}}</view>
					</view>
				</view>
				<view v-if="index1==4" class="index4">
					<view class="index4_text"><span>{{item.offernum}}</span>位师傅已报价</view>
					<view style="display: flex;" @click.stop="toMaster(item.id)">
						<view style="color: #00CC7B;">查看报价</view>
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
				<view class="total_money">总金额：<span style="color: #FA5A28;font-size: 28rpx;font-weight: bold;">￥{{item.order_price}}</span>
				</view>
				<view class="btns" v-if="index1==1">
					<view class="btn">取消订单</view>
					<view class="btn">重新发布</view>
					<view class="pay_btn">立即付款</view>
				</view>
				<view class="btns" v-if="index1==2">
					<view class="btn">取消订单</view>
					<view class="btn">重新发布</view>
				</view>
				<view class="btns" v-if="index1==3">
					<view class="btn">取消订单</view>
					<view class="btn">重新发布</view>
					<!-- <view class="pay_btn">确认下单</view> -->
				</view>
				<view class="btns" v-if="index1==4">
					<view class="btn">重新发布</view>
				</view>
				<view class="btns" v-if="index1==5">
					<view class="btn">再次下单</view>
					<view class="pay_btn">联系师傅</view>
				</view>
				<view class="btns" v-if="index1==6">
					<view class="btn">再次下单</view>
					<view class="pay_btn">确认验收</view>
				</view>
				<view class="btns" v-if="index1==7">
					<view class="btn">再次下单</view>
					<view class="pay_btn">去评价</view>
				</view>
				<view class="btns" v-if="index1==8">
					<view class="btn">再次下单</view>
					<view class="btn">删除订单</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="null">
				<image src="../../static/order/null.png"></image>
				<view>暂无相关记录</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {orderList} from "../../api/index.js"
	export default {
		data() {
			return {
				topHeight: 0,
				index1:0,
				order_list: [],
				keywords:'',
				tab_list: [{
						name: '全部'
					},
					{
						name: ' 待付款'
					},
					{
						name: '待接单'
					},
					{
						name: '待报价'
					},
					{
						name: '选师傅'
					},
					{
						name: '施工中'
					},
					{
						name: '待验收'
					},
					{
						name: '待评价'
					},
					{
						name: '已完成'
					},
				]
			}
		},
		onLoad(e) {
			this.index1=e.index
			uni.getSystemInfo({
				success: (res) => {
					this.topHeight = res.statusBarHeight || 24
					console.log(res.statusBarHeight);
				},
			});
		},
		onShow() {
			this.getOrderList()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getOrderList(){
				orderList(this.index1,this.keywords).then(res=>{
					console.log(res);
					this.order_list=res.data.data
				})
			},
			click(e){
				this.index1=e.index
				this.getOrderList()
				console.log(this.index1);
			},
			toDetail(e){
				uni.navigateTo({
					url:'/pages/order/orderdetail?id=' + e
				})
			},
			toMaster(e){
				uni.navigateTo({
					url:'/pages/order/master?id='+e
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.ordercopy_page {
		width: 100%;
		height: auto;
		min-height: 1282rpx;
		background-color: #F9F9F9;
	}

	.topbar {
		background-color: #00CC7B;
	}

	.page_title {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		background-color: #00CC7B;
		position: relative;

		.back_icon {
			position: absolute;
			top: 20rpx;
			left: 26rpx;
		}

		.search_icon {
			position: absolute;
			top: 20rpx;
			right: 32rpx;
		}
	}
	.null{
			width: 360rpx;
			height: 500rpx;
			margin: auto;
			margin-top: 160rpx;
			image{
				width: 346rpx;
				height: 298rpx;
			}
			view{
				width: 100%;
				height: 48rpx;
				color: #333333;
				font-size: 28rpx;
				text-align: center;
				margin-top: 80rpx;
			}
		}
		
		.item{
			width: 100%;
			height: auto;
			min-height: 420rpx;
			background-color: #FFFFFF;
			padding: 32rpx;
			margin-top: 32rpx;
			position: relative;
			.text{
				color: #00CC7B;
				font-size: 28rpx;
				font-weight: bold;
			}
			.item_tips{
				position: absolute;
				width: 148rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 100rpx 0rpx 0rpx 100rpx;
				background-color: rgba(0, 204, 123, 0.10);
				color:#00CC7B;
				font-size: 28rpx;
				top: 22rpx;
				right: 0rpx;
			}
			.content{
				width: 100%;
				height: 160rpx;
				display: flex;
				margin-top: 64rpx;
				image{
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
				}
				.right {
					width: 500rpx;
					height: 160rpx;
					margin-left: 32rpx;
				
					.tips {
						color: #666666;
						font-size: 28rpx;
						margin-top: 24rpx;
					}
				
					.goods_name {
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}
				}
			}
			.index4{
				width: 100%;
				height: 104rpx;
				background-color: #F9F9F9;
				padding: 32rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 32rpx;
				border-radius: 8rpx;
				.index4_text{
					font-size: 28rpx;
					color: #333333;
					span{
						color: #00CC7B;
					}
				}
			}
			.total_money{
				width: 100%;
				height: 40rpx;
				color: #333333;
				font-size: 24rpx;
				text-align: right;
				margin-top: 52rpx;
			}
			.btns{
				width: 100%;
				height: 56rpx;
				margin-top: 34rpx;
				text-align: right;
				display: flex;
				justify-content: end;
				padding-left: 174rpx;
				.btn{
					width: 160rpx;
					height: 56rpx;
					line-height: 48rpx;
					border-radius: 32rpx;
					color: #333333;
					text-align: center;
					font-size: 24rpx;
					border: 2rpx #DDDDDD solid;
					margin-right: 16rpx;
				}
				.pay_btn{
					width: 160rpx;
					height: 56rpx;
					line-height: 48rpx;
					border-radius: 32rpx;
					color: #00CC7B;
					text-align: center;
					font-size: 24rpx;
					border: 2rpx #00CC7B solid;
				}
			}
		}
</style>